<script lang="ts" setup>
//行为 
import { ref } from 'vue'
// ref 类似鸿蒙的属性，用于定义数据
// ref包装后，会返回一个ref对象，初始化的数据被保存在ref对象的value属性中
const totalCount = ref(100)
console.log(totalCount)  //ref对象

const addCount = () => {
  // 修改ref对象的.value属性值，自动更新视图
  totalCount.value++
}

const subCount = () => {
  totalCount.value--
}

</script>

<template>
  <!-- template类似鸿蒙组件的build（）函数，用于构建界面 -->
<button @click="addCount()">+</button>
<!--template可以被直接渲染ref 数据，不需要使用.value-->
<span>{{ totalCount }}</span>
<button @click="subCount()">-</button>

<!-- <button @click="totalCount++">+</button>
  <span>{{ totalCount }}</span>
  <button @click="totalCount--">-</button> -->
 
</template>

<style scoped>
/* 样式 类似鸿蒙组件的style（）函数，用于定义样式 */
/* scoped 告诉编译器，这个样式只对当前组件生效，避免样式冲突 */

</style>